<template>
  <div class="box">
    <div class="brand">
      <van-icon name="goods-collect" size="30px" />
      <p>品牌店铺</p>
    </div>
    <div class="brand">
      <van-icon name="star" size="30px" color="gray" />
      <p style="color: gray">收藏</p>
    </div>
    <div class="joincar" is-link @click="showPopup">加入购物车 </div>
    <van-popup
      v-model="show"
      position="bottom"
      :overlay="false"
      closeable
      :style="{ height: '50%' }"
    >
      <div class="count">
        <img src="../../assets/img/weiyi.jpg" alt="" />
        <div class="countr">
          <p>
            <b style="font-weight: bold">￥589</b>
            <span class="line">￥700</span>
          </p>
          <p class="bold">已选：黑 L</p>
          <p class="bold">175/176A 臀围：116cm 腰围76cm</p>
        </div>
      </div>
      <div class="color">
        <span>颜色</span>
        <b class="active" @click="bClick">黑</b>
      </div>
      <div class="color">
        <span>尺码</span>
        <b
          class="gary"
          :class="{ active: activeindex == index }"
          v-for="(size, index) in sizes"
          :key="index"
          @click="bClick(index)"
          >{{ size }}</b
        >
      </div>
      <div class="colort">
        <span>数量</span>
        <van-stepper v-model="value" style="margin: 0 20px" />
        <span style="color: gray">剩余3件</span>
      </div>
      <van-button type="primary" size="large" @click="joinClick"
        >加入购物车</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  name: "",
  data() {
    return {
      show: false,
      value: 1,
      sizes: ["S", "M", "L", "XL"],
      activeindex: -1,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    bClick(idx) {
      this.activeindex = idx;
    },
    joinClick() {
      Toast("加入成功");
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: white;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid #ccc; 
}
.joincar{
  width: 44%;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 3px;
  background-color: #eb0313;
  color:white; 
   
}
.brand {
  text-align: center;
  width: 50px;
}
.brand p {
  font-size: 9px;
}
.van-cell {
  width: 115px;
  height: 45px;
}

.van-cell__value van-cell__value--alone {
  width: 100%;
  height: 100%;
}
.count {
  width: 350px;
  height: 100px;
  margin: auto;
  border-bottom: 1px solid gray;
}
.count img {
  width: 80px;
  height: 94px;
  float: left;
}
.count b {
  color: #eb0313;
}
.countr {
  margin-left: 90px;
}
.countr p {
  margin-top: 15px;
}
.line {
  text-decoration: line-through;
}
.bold {
  font-weight: 700;
}
.color {
  width: 350px;
  height: 54px;
  margin: auto;
  display: flex;
  align-items: center;
  border-bottom: 1px solid gray;
  font-size: 14px;
}
.colort {
  width: 350px;
  height: 54px;
  margin: auto;
  display: flex;
  align-items: center;
}
.colort span{
  font-size: 14px;
}
.color b {
  display: block;
  width: 38px;
  height: 30px;
  margin-left: 20px;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
}
.gary {
  background-color: grey;
}
.van-button--primary {
  position: absolute;
  bottom: 0;
  border: none;
  font-size: 18px;
  background-color: #eb0313;
}
.active {
  background-color: #eb0313;
}
</style>